<template>
  <view class="content">
    <view class="header">
      <view class="bg">
        <view class="info">
          <u-row>
            <u-col span="4">
              <u-image
                width="126rpx"
                height="126rpx"
                :src="userInfo.avatar"
                shape="circle"
                class="avatar"
              ></u-image
            ></u-col>
            <u-col span="5">
              <view class="right">
                <view class="name">{{ userInfo.name }}</view>
                <view class="phone">{{ userInfo.phone }}</view>
              </view>
            </u-col>
            <u-col span="3"
              ><u-button size="mini" @click="updateInfo"
                >更新信息</u-button
              ></u-col
            >
          </u-row>
        </view>
      </view>
    </view>
    <view class="body">
      <view class="item">
        <u-row>
          <u-col span="1"
            ><u-icon name="order" color="#EF2E1C" size="30"></u-icon
          ></u-col>
          <u-col span="10" @click="toAbout">关于我们</u-col>
          <u-col span="1"
            ><u-icon name="arrow-right" color="#999999"></u-icon
          ></u-col>
        </u-row>
      </view>
      <u-line color="#3A3635" />
      <view class="item">
        <u-row>
          <u-col span="1"
            ><u-icon name="file-text" color="#EF2E1C" size="30"></u-icon
          ></u-col>
          <u-col span="10" @click="toRule">平台规则</u-col>
          <u-col span="1"
            ><u-icon name="arrow-right" color="#999999"></u-icon
          ></u-col>
        </u-row>
      </view>
      <u-line color="#3A3635" />
      <view class="item">
        <u-row>
          <u-col span="1"
            ><u-icon name="kefu-ermai" color="#EF2E1C" size="30"></u-icon
          ></u-col>
          <u-col span="10">联系我们</u-col>
          <u-col span="1"
            ><u-icon name="arrow-right" color="#999999"></u-icon
          ></u-col>
        </u-row>
      </view>
    </view>
  </view>
</template>
  
  <script>
export default {
  onLoad() {
    this.getUserInfo();
  },
  created() {},
  data() {
    return {
      userInfo: {
        name: "匿名用户",
        phone: "",
        avatar:
          "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
      },
      showKefu: false,
    };
  },
  methods: {
    updateInfo() {
      this.$u.route("pages/me/info");
    },
    toRule() {
      this.$u.route("pages/me/rule");
    },
    toAbout() {
      this.$u.route("pages/me/about");
    },
    async getUserInfo() {
      let res = await this.$u.api.getUserInfo();
      if (res.code == 1) {
        this.userInfo = res.data;
      }
    },
  },
};
</script>
  
<style lang="scss" scoped>
.header {
  margin: 30rpx 30rpx 0rpx 30rpx;
  height: 272rpx;
  .bg {
    border-radius: 20rpx;
    background: repeating-linear-gradient(to right, #000000, #fa9916);
    // background-image: url("@/static/image/me@2x.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
  }
  .info {
    padding-top: 72rpx;
    .avatar {
      float: right;
    }
    .right {
      float: left;
      .name {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #ffffff;
        margin-bottom: 30rpx;
      }
      .phone {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
.body {
  background: #ffffff;
  border-radius: 20rpx;
  margin: 30rpx 30rpx 0rpx 30rpx;
  padding: 0rpx 30rpx;
  height: 855rpx;
  .item {
    padding: 30rpx 0rpx;
  }
}
.kefu {
  margin: 200rpx auto;
  width: 600rpx;
  height: 1000rpx;
}
</style>